<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<title>邮箱登陆验证</title>
        <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
		<script type="text/javascript" src="../../boot/plugin/layui/layui.js"></script>
		<script type="text/javascript" src="http://47.100.102.177:8080/app/plugin/jquery.min.js"></script>
        <style type="text/css">
			body{
				background-image: url("http://47.100.102.177:8080/app/images/login/街的对面%20海边可爱女生插画4k壁纸_彼岸图网.jpg");
				background-size: cover;
			}
      		.container{
      			width: 420px;
      			height: 320px;
		 		 min-height: 320px;  
		 		 max-height: 320px;  
		 		 position: absolute;   
		 		 top: 0;  
		 		 left: 0;  
		 		 bottom: 0;  
		 		 right: 0;  
		 		 margin: auto;  
		 		 padding: 20px;  
		 		 z-index: 130;  
		 		 border-radius: 8px;  
		 		 background-color: #fff;  
		 		 box-shadow: 0 3px 18px rgba(100, 0, 0, .5); 
		 		 font-size: 16px;
      		}
      		.close{
      			background-color: white;
      			border: none;
      			font-size: 18px;
      			margin-left: 410px;
      			margin-top: -10px;
      		}
 
        	.layui-input{
        		border-radius: 5px;
        		width: 300px;
        		height: 40px;
        		font-size: 15px;
        	}
        	.layui-form-item{
        		margin-left: -20px;
        	}
			#logoid{ 
				margin-top: -16px;
		 		 padding-left:150px; 
		 		 padding-bottom: 15px;
			}
			.layui-btn{
				margin-left: -50px;
				border-radius: 5px;
        		font-size: 15px;
			}
			.verity{
				width: 120px;
			}
			.font-set{
				font-size: 13px;
				text-decoration: none; 
				margin-left: 100px;
			}
			a:hover{
			 text-decoration: underline; 
			}
 
        </style>
    </head>
    <body>
    	<form class="layui-form">
    		<div class="container">
    			<button id="close"  class="close" title="关闭">X</button>
    			<div class="layui-form-mid layui-word-aux">
    				<img id="logoid" src="http://47.100.102.177:8080/app/images/common/logo.png" style="width: 150px; height: auto;">
    			</div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">邮箱号</label>
			    <div class="layui-input-block">
			      <input type="text" id="uemail" name="uemail" required  lay-verify="required" placeholder="请输入邮箱号" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			   <div class="layui-form-item">
			    <label class="layui-form-label">验证码</label>
				<button id="ebton" type="button" class="layui-btn">发送验证码</button>
			    <div class="layui-input-inline">
			      <input type="text" id="ucode" name="ucode" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input verity">
			    </div>
			    <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
			      
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button id="bton" class="layui-btn layui-btn-fluid" type="button">登陆</button>
			    </div>
			  </div>
			   <a href="./forget/forget" class="font-set">忘记密码?</a>  <a href='login' class="font-set">立即注册</a>
			</div>
		</form>
		
		<script>
			let b=document.getElementById("bton");
			let e=document.getElementById("ebton");
			let c=document.getElementById("close");
			let email;
			let code;
			let li;

			b.onclick=()=>{
				code=$("#ucode").val();
				email = $("#uemail").val();
				$.post('/boot/users/get',{code:code,account:email},function (res) {
						if(res.code==='200') {
							window.location = '/boot/index01';
						}
						else {
							alert(res.msg);
						}
				})
			}
			c.onclick=()=>{
				window.location='/boot/login';
			}

			// 按钮点击之后，会禁用 disabled 为true
			// 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
			// 里面秒数是有变化的，因此需要用到定时器
			// 定义一个变量，在定时器里面，不断递减
			// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
			var time = 60; // 定义剩下的秒数
			e.addEventListener('click', function() {
				li=layer.load(0);
					email = $("#uemail").val();
					$.get('/boot/users/quire',{account:email},function (res) {
							if(res.code==='404'){
								layer.close(li);
								alert("邮箱不存在")
							}
							else {
									$.get('/boot/users/send',{email:email},function (res) {
										layer.close(li);
										layer.msg("验证码已发送")
										e.disabled = true;
										var timer = setInterval(function() {
											if (time == 0) {
												// 清除定时器和复原按钮
												clearInterval(timer);
												e.disabled = false;
												e.innerHTML = '发送验证码';
												time = 3; // 重新赋值时间变量
											} else {
												e.innerHTML = time + '秒后可再次发送';
												time--;
											}
										}, 1000);
									})
							}
					})
			});

			</script>
    </body>
</html>
